import React, { Component } from "react";
import { Tooltip } from "antd";
import styles from "./Card.less";
import defaultImg from "./default.png";
import TOP from "../../../../assets/channel-types/top.png";
import UNTOP from "../../../../assets/channel-types/unTop.png";

class Card extends Component {
  render() {
    const {
      img = "",
      title = "",
      desc = "",
      foot = [],
      topClick = () => {},
      id = "",
      topStatus = 0,
      style,
      tenantName
    } = this.props;

    return (
      <div className={styles.root} style={style}>
        <div className={styles.content}>
          <div className={styles.img}>
            <img src={img || defaultImg} />
          </div>
          <div className={styles.text}>
            <div className={styles.title}>
              <span>{title}</span>
              <span className={styles.tenant}>{tenantName}</span>
            </div>
            <span className={styles.desc}>{desc}</span>
          </div>
          <Tooltip title={topStatus ? "取消置顶" : "置顶"}>
            <img
              src={topStatus ? TOP : UNTOP}
              alt="top"
              width="21"
              height="21"
              onClick={() => topClick(id)}
            />
          </Tooltip>
        </div>
        <div className={styles.foot}>
          {foot.map((item, index) => (
            <div
              className={styles.foottext}
              key={index}
              onClick={item.onClick ? () => item.onClick(id) : null}
            >
              {item.name}
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default Card;
